<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <!-- <li><input type="checkbox" checked />标题一</li> -->
    </ul>
    <input type="checkbox" class="all" />全选

    <script>
      var arr = [
        {
          title: "标题一",
          checked: false,
        },
        {
          title: "标题二2",
          checked: true,
        },
        {
          title: "标题三",
          checked: false,
        },
      ];

      // 定义函数
      renderDom(arr);
      function renderDom(arr) {
        //循环生成arr,里面有3个item 生成3个li
        var ulEle = document.querySelector("ul");
        arr.forEach(function (item, key) {
          var liEle = document.createElement("li");
          liEle.innerHTML = `<input type = "checkbox" ${
            item.checked ? "checked" : ""
          } />${item.title}`;
          //在li里面加入<input type="checkbox" checked />标题一
          //最后要把li放在ul里面
          liEle.onclick = function (e) {
            var target = e.target;
            //把checkbox的事件委托给父级元素
            if (target.nodeName === "INPUT") {
              // console.log("点击了checkbox", key);
              //把arr里面的第key个值得checked 改变
              arr[key].checked = target.checked;
              console.log("点击了checkbox", arr);
              var isCheckAll = arr.every(function (item) {
                return item.checked;
              });
              console.log("isCheckedAll", isCheckAll);
              document.querySelector(".all").checked = isCheckAll;
            }
          };
          ulEle.appendChild(liEle);
        });
        //默认生成的input 都带了checked 所以默认都勾选了  我们根据数据里面的checked数据来判断是否勾选
      }
    </script>
  </body>
</html>
